<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="filter-container" style="margin-bottom: 10px">
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.technologyNo"
            style="width: 150px;margin-right:15px;"
            :placeholder="'请输入产品编号'"
      ></el-input>

       <el-date-picker
        :clearable="false"
        v-model="dateOptions"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="请选择开始时间"
        end-placeholder="结束时间"
        align="right"
        style="margin-right:15px;"
        />

      <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>

    </div>
    
    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
        <el-table-column  label="序号" type="index" align="center" width="80px"/>
        <el-table-column  label="装配线体" prop='sectionNo' align="center"/>
        <el-table-column  label="装配日期" prop='lastScanTime' align="center" width="140px"/>
        <el-table-column  label="机柜条码号" prop='deviceBarcode' align="center" width="160px"/>
        <el-table-column  label="产品编号" prop='technologyNo' align="center"/>
        <el-table-column  label="台数" prop='count' align="center" width="80px"/>
        <el-table-column  label="工序1(M)" prop='time01' align="center"/>
        <el-table-column  label="工序2(M)" prop='time02' align="center"/>
        <el-table-column  label="工序3(M)" prop='time03' align="center"/>
        <el-table-column  label="工序4(M)" prop='time04' align="center"/>
        <el-table-column  label="工序5(M)" prop='time05' align="center"/>
        <el-table-column  label="工序6(M)" prop='time06' align="center"/>
        <el-table-column  label="工序7(M)" prop='time07' align="center"/>
        <el-table-column  label="工序8(M)" prop='time08' align="center"/>
        <el-table-column  label="工序9(M)" prop='time09' align="center"/>
        <el-table-column  label="工序10(M)" prop='time10' align="center"/>
        <el-table-column  label="工序11(M)" prop='time11' align="center"/>
        <el-table-column  label="工序12(M)" prop='time12' align="center"/>
        <el-table-column  label="工序13(M)" prop='time13' align="center"/>
        <el-table-column  label="工序14(M)" prop='time14' align="center"/>
        <el-table-column  label="工序15(M)" prop='time15' align="center"/>
        <el-table-column  label="工序16(M)" prop='time16' align="center"/>
        <el-table-column  label="工序17(M)" prop='time17' align="center"/>
        <el-table-column  label="工序18(M)" prop='time18' align="center"/>
        <el-table-column  label="工序19(M)" prop='time19' align="center"/>
        <el-table-column  label="工序20(M)" prop='time20' align="center"/>
        <el-table-column  label="工序21(M)" prop='time21' align="center"/>
        <el-table-column  label="工序22(M)" prop='time22' align="center"/>
        <el-table-column  label="工序23(M)" prop='time23' align="center"/>
        <el-table-column  label="工序24(M)" prop='time24' align="center"/>
        <el-table-column  label="工序25(M)" prop='time25' align="center"/>
      </el-table>
      <div slot="tip" class="el-upload__tip">提示：M指的是分钟</div>
   
   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

     <el-divider></el-divider>

    <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

  </div>
</template>

<script>
import { TheProductWorkingHours } from '@/api/performance.js'
export default {
     name: 'productHoursData',
    data() {
        return {
            total: 0,                           //数据的总数
            listQuery: {
                page: 1,                          //页码
                limit: 10,                        //每页显示的数据条数
                technologyNo: '',
            },
            tableInfo: [],
            loadingList: false,
            loading: false,
            pickerOptions: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
            dateOptions: this.getNowTime()
        }
    },
    methods: {
    transformDat(res) {
      const mapProductInfo = {
        index:'序号',
        sectionNo: '装配线体',
        lastScanTime: '装配日期',
        deviceBarcode: '机柜条码号',
        technologyNo:'产品编号',
        count: '台数',
        time01: '工序1(分钟)',
        time02: '工序2(分钟)',
        time03: '工序3(分钟)',
        time04: '工序4(分钟)',
        time05: '工序5(分钟)',
        time06: '工序6(分钟)',
        time07: '工序7(分钟)',
        time08: '工序8(分钟)',
        time09: '工序9(分钟)',
        time10: '工序10(分钟)',
        time11: '工序11(分钟)',
        time12: '工序12(分钟)',
        time13: '工序13(分钟)',
        time14: '工序14(分钟)',
        time15: '工序15(分钟)',
        time16: '工序16(分钟)',
        time17: '工序17(分钟)',
        time18: '工序18(分钟)',
        time19: '工序19(分钟)',
        time20: '工序20(分钟)',
        time21: '工序21(分钟)',
        time22: '工序22(分钟)',
        time23: '工序23(分钟)',
        time24: '工序24(分钟)',
        time25: '工序25(分钟)'
      }
      // 对data进行格式化
      // 取出所有的属性名
      const props = Object.keys(res[0]) // ['id','']
      console.log(props)
      // 将属性名从英文转为中文
      const header = props.map(zhkey => mapProductInfo[zhkey])
      const data = res.map(obj => Object.values(obj))
      console.log(data)
      return { header, data }
    },
    // 导出excel
    async hExportExcel() {
      this.loading = true
      let query = Object.assign({},this.listQuery)
      if(this.dateOptions) {
        if(this.dateOptions.length) {
            query.beginTime = this.dateOptions[0]
            query.finishTime = this.dateOptions[1]
        }
      }
      query.page = 1
      query.limit = 10000
      console.log('%c导出excel传的参数query:','color:green;font-size:16px;')
      console.log(query)

      let arr = await TheProductWorkingHours(query)
      let technologyString = this.listQuery.technologyNo?'产品编号' + this.listQuery.technologyNo + '-':''
      let dateString = query.finishTime?'时间' + this.dateOptions[0] +'至'+ query.finishTime + '-':''
      let nameString = technologyString + dateString
      if(!arr.data.TheProductWorkingHours.length) return this.$message.error('导出数据为空！')
      const { header, data } = this.transformDat(this.setSort(arr.data.TheProductWorkingHours))
        import('@/vendor/Export2Excel').then(excel => {
        // excel表示导入的模块对象
        console.log(excel)
        excel.export_json_to_excel({
        header, // 表头 必填
        data, // 具体数据 必填
        filename: nameString + '产品序号工时数据' + 'excel', // 文件名称
        autoWidth: true, // 宽度是否自适应
        bookType: 'xlsx' // 生成的文件类型
        })
      })
      this.loading = false
    },
        // 排序函数
    setSort(arr){
      let newArr = JSON.parse(JSON.stringify(arr))
      let arr1 = []
      newArr.forEach((item,index)=>{
        let obj = {
          index: index+1,
          sectionNo: item.sectionNo,
          lastScanTime: item.lastScanTime,
          deviceBarcode: item.deviceBarcode,
          technologyNo: item.technologyNo,
          count: item.count,
          time01: item.time01,
          time02: item.time02,
          time03: item.time03,
          time04: item.time04,
          time05: item.time05,
          time06: item.time06,
          time07: item.time07,
          time08: item.time08,
          time09: item.time09,
          time10: item.time10,
          time11: item.time11,
          time12: item.time12,
          time13: item.time13,
          time14: item.time14,
          time15: item.time15,
          time16: item.time16,
          time17: item.time17,
          time18: item.time18,
          time19: item.time19,
          time20: item.time20,
          time21: item.time21,
          time22: item.time22,
          time23: item.time23,
          time24: item.time24,
          time25: item.time25,
      }
      arr1.push(obj)
      })
      return arr1
    },
    // 搜索按钮绑定的函数，向服务器发送表单数据
    // 所有传输的表单字段都不是必须的，按需查询
    // technologyNo产品编号查询
    async handleFilter(param) {
      this.loadingList = true
      let query = Object.assign({},this.listQuery)
      if(this.dateOptions.length) {
        query.beginTime = this.dateOptions[0]
        query.finishTime = this.dateOptions[1]
      }
      // 用来判断查询的条件是否为空，当不为空时，则返回到首页，也就是第一页
      if(param=='1') {
		    query.page = 1
        this.listQuery.page = 1
      } else {
        console.log('搜索内容不为空')
      }
      let {data} =await TheProductWorkingHours(query)
      this.tableInfo = data.TheProductWorkingHours
      this.total = data.count
      this.loadingList = false
    },
    //初始默认执行(重点)，返回日期格式YYYY-MM-DD HH:MM:SS
    getNowTime() {
      let dateTime = +new Date()+8*3600*1000
      const start = new Date(dateTime - 3600 * 1000 * 24 * 7)
        .toISOString()
        .replace('T', ' ')
        .split('.')[0] //默认开始时间7天前
      const end = new Date(dateTime)
        .toISOString()
        .replace('T', ' ')
        .split('.')[0]//默认结束时间当前时间
      console.log([start, end])
      return [start, end]
    },
    // table表单下方的页码组件改变每页显示的数据条数
     handleSizeChange(val) {
      this.listQuery.limit = val
      this.handleFilter()
    },
    // table表单下方的页码组件改变页面
     handleCurrentChange(val) {
      this.listQuery.page = val
      this.handleFilter()
    },
    getData() {
      this.listQuery.page = 1
      this.listQuery.limit = 10
      this.handleFilter()
    },
  },
  // 进入页面获取table信息
  mounted() {
    this.handleFilter()
  }
}
</script>

<style>
.el-picker-panel__footer .el-picker-panel__link-btn.el-button--text  {
  display: none;
}
</style>